<template>
	<view>
		<view class="cu-bar search bg-white">
			<view class="search-form round">
				<text class="cuIcon-search"></text>
				<input @focus="InputFocus" @blur="InputBlur" :adjust-position="false" type="text" placeholder="搜索图片、文章、视频" confirm-type="search"></input>
			</view>
			<view class="action">
				<button class="cu-btn bg-green shadow-blur round">搜索</button>
			</view>
		</view>
		<swiper class="screen-swiper square-dot" :indicator-dots="true" :circular="true" :autoplay="true" interval="5000"
		 duration="500">
			<swiper-item v-for="(item,index) in swiperList" :key="index">
				<image :src="item.url" mode="aspectFill" v-if="item.type=='image'"></image>
				<video :src="item.url" autoplay loop muted :show-play-btn="false" :controls="false" objectFit="cover" v-if="item.type=='video'"></video>
			</swiper-item>
		</swiper>

		<view class="cu-list grid no-border col-4">
			<view class="cu-item" v-for="(item,index) in cuIconList" :key="index">
				<view class="cu-avatar round lg" :style="[{backgroundImage:'url(https://ossweb-img.qq.com/images/lol/web201310/skin/big2100'+ (index+2) +'.jpg)'}]"></view>
				<text>{{item.name}}</text>
			</view>
		</view>

		<view class="cu-bar bg-white solid-bottom solid-top">
			<view class="action">
				热门推荐
			</view>
			<view class="action">
				<view class="text-center text-blue" >
					更多
				</view>
			</view>
		</view>
		<view class="bg-white padding">
			<movie_list :movie_list="swiperList"></movie_list>
		</view>

		<!--滚动-->
		<movie_scroll title="猜你喜欢" :movie_list="swiperList"></movie_scroll>

		<movie_scroll title="动作大片" col="3" :movie_list="swiperList"></movie_scroll>
	</view>
</template>

<script>
	import movie_list from "@/components/movie_list.vue";
	import movie_scroll from "@/components/movie_scroll.vue";

	export default {
		name:"home",
		components:{movie_list,movie_scroll},
		data() {
			return {
				cardCur: 0,
				cuIconList: [{
					name: '电影'
				}, {
					name: '电视剧'
				}, {
					name: '动漫'
				}, {
					name: '更多分类'
				}],
				swiperList: [{
					id: 0,
					type: 'image',
					url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big84000.jpg'
				}, {
					id: 1,
					type: 'image',
					url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big37006.jpg',
				}, {
					id: 2,
					type: 'image',
					url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big39000.jpg'
				}, {
					id: 3,
					type: 'image',
					url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big10001.jpg'
				}, {
					id: 4,
					type: 'image',
					url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big25011.jpg'
				}, {
					id: 5,
					type: 'image',
					url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big21016.jpg'
				}],
				dotStyle: true,
				towerStart: 0,
				direction: ''
			}
		},
		methods: {
			InputFocus(){},
			InputBlur(){},
		}
	}
</script>

<style scoped lang="scss">
	.tower-swiper .tower-item {
		transform: scale(calc(0.5 + var(--index) / 10));
		margin-left: calc(var(--left) * 100upx - 150upx);
		z-index: var(--index);
	}

	.cu-avatar.lg {
		margin: 0 auto;
	}
</style>
